<template>
	<view class="whole">
		<view class="header">
			<image :src="dataimg" class="image"  mode="widthFix"></image>
		</view>
		<view class="main">
			<view class="main_f dia">
				<view class="">专注解决经济和劳动纠纷维权</view>
				<view class="dia">
					<image src="../../static/down.png" mode="" class="images"></image>
					<image src="../../static/down.png" mode="" class="images"></image>
					<image src="../../static/down.png" mode="" class="images"></image>
				</view>
				<view class="">点击下方立即预约</view>
			</view>
			<view class="dis main_wx">
				<image src="../../static/wetchat.png" mode="" class="wx_image"></image>
				<view class="" style="margin-left: 4px;" @click="go_url">立即预约</view>
			</view>
			<view class="case">成功案例</view>
			<view class="dia video_bix">
				<view class="video_v" v-for="(item,index) in dataList" :key="index" @click="bofang(item)">
					<image :src="item.avatar" mode="" class="images_video"></image>
					<image src="/static/videoplay.png" mode="" class="videoplay"></image>
				</view>
			</view>
		</view>
		<view class="video_img" v-if="is_show">
			<video :src="vedio_url"  :autoplay="true" :page-gesture="true" preload="auto" playsinline></video>
			<view class="close" @click="guanbi">
				<image src="../../static/close.png" mode="" style="width: 34px;height: 34px;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				title: 'Hello',
				code:'',
				id:'',
				price:'0',
				dataList:[],
				dataimg:'',
				is_show:false,
				vedio_url:''
			}
		},
		onLoad(e) {
			let that = this
			let result = ''
			result = e.data
			that.price = result
		},
		onShow() {
			this.getList()
			this.getImg()
		},
		methods: {
			bofang(e){
				this.vedio_url = e.video
				this.is_show = true
			},
			go_url(){
				if(this.price){
					this.tui.href('/pages/index/index?data='+this.price)
				}else{
					this.tui.toast('暂无方案,请联系客服')
				}
			},
			guanbi(){
				this.is_show = false
			},
			getImg(){
				
				let that = this
				that.tui.request("api.data/img", "POST", {}, false, false, false).then((res) => {
					if (res.code == 1) {
						that.dataimg = res.data.img
					}
				}).catch((res) => {
				
				})
			},
			getList(){
				let that = this
				that.tui.request("api.data/video", "POST", {}, false, false, false).then((res) => {
					if (res.code == 1) {
						that.dataList = res.data.list
					}
				}).catch((res) => {
				
				})
			},
			
			submite(){
				let that = this
				
				
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fdfcfa;
	}
	.video_img{width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;transition-duration: 300ms;
    transition-timing-function: ease-out;
		video{width: 100%;height: 100%}
		.close{position: absolute;top: 30px;left: 30px;font-size: 60rpx;color: #fff;z-index: 1111;}
	}
	.video_bix{
	    flex-wrap: wrap;
	}
	.dia{
	    display: flex;
	    align-items: center;
	}
	.images_video{
	    width: 211rpx;
	    height: 378rpx;
	}
	.videoplay{
	    width: 39px;
	    height: 39px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    -webkit-transform: translate(-50%,-50%);
	    transform: translate(-50%,-50%);
	}
	.video_v{
	    margin-top: 13px;
	    width: 211rpx;
	    height: 378rpx;
	    margin-right: 30rpx;
	    position: relative;
	}
	.bottomf_box{
	    padding: 13px 13px 77px 13px;
	    box-sizing: border-box;
	    background-color: #fafafa;
		.professional{
		    font-size: 14px;
		    padding-bottom: 13px;
		    border-bottom: 1px solid rgba(0,0,0,.12549019607843137);
		    margin-top: 6px;
		    margin-bottom: 14px;
			.professional_img{
				margin-top: 5px;
				.image{
				    width: 103px;
				    height: 103px;
				}
			}
		}
		
		
	}
	.dia{
	    display: flex;
	    align-items: center;
	}
	.header image{
		width: 100%;
	}
	.main{
	    margin-top: 15px;
	    padding-left: 30rpx;
	    box-sizing: border-box;
		.case{
			font-size: 17px;
			font-family: Source Han Sans CN-Medium,Source Han Sans CN;
			font-weight: 500;
			margin-top: 13px;
		}
		.main_f{
		    font-size: 15px;
		    font-family: Source Han Sans CN-Regular,Source Han Sans CN;
		    font-weight: 400;
			.images{
			    width: 16px;
			    height: 16px;
			}
		}
		.main_wx{
		    font-size: 15px;
		    font-family: Source Han Sans CN-Medium,Source Han Sans CN;
		    font-weight: 500;
		    color: #d0c096;
		    width: 102px;
		    height: 30px;
		    background: #22252b;
		    border-radius: 2px;
		    margin-top: 15px;display: flex;align-items: center;justify-content: center;
			.wx_image{
			    width: 17px;
			    height: 17px;
			}
		}
	}
	
</style>